<template>
  <div>
    <div style="display:flex">
      <!-- <div>
        <el-button size="mini" type="success" @click="addFormAlert">单个添加</el-button>
      </div>-->
      <div class="search-Box">
        <div class="left-box">
          <div class="item">
            <div class="in-item">
              <el-cascader
                placeholder="学年/学期/班级/课程"
                class="cascader"
                @change="cascaderChange"
                :props="changeSpacity"
              ></el-cascader>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-table :data="gradeList" stripe style="width: 100%;">
      <el-table-column prop="course.coursename" label="课程名"></el-table-column>
      <el-table-column prop="student.nid" label="学生学号"></el-table-column>
      <el-table-column prop="student.name" label="学生姓名"></el-table-column>
      <el-table-column label="得分">
        <template slot-scope="scope">
          <el-input v-if="!scope.row.isEdit" v-model="scope.row.grade"></el-input>
          <span v-if="scope.row.isEdit" v-text="scope.row.grade"></span>
          <!-- <el-button size="mini" @click="checkInfo(scope.$index, scope.row)">查看详细信息</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="button-div" style="margin-top:20px;">
      <el-button
        @click="submitChange"
        v-if="gradeList.length>0&&isEditList.length!= gradeList.length"
        type="success"
      >提交</el-button>
    </div>
  </div>
  <!-- <h2>这是成绩管理页面</h2> -->
</template>

<script>
import axios from "../../http";
let tempInfo = {};
import { handleMessage } from "../../plugins";
export default {
  data() {
    return {
      tempSearchParam: {},
      gradeList: [
        { coursename: "22", student: { nid: 111, name: 222 }, grade: 1 }
      ],
      changeSpacity: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(async () => {
            if (node.level == 0) {
              let res = await axios.get("teacherPageAPI/nowXnAndXq");
              let xnList = res.data.xn.split("-");
              const yearList = [];
              for (let i = 0; i < 4; i++) {
                let xn = xnList[0] - i + "-" + (xnList[1] - i);
                yearList.push({ value: xn, label: xn, leaf: node.level >= 3 });
              }
              resolve(yearList);
            }
            if (node.level == 1) {
              tempInfo.xn = node.value;
              resolve([
                { value: "1", label: "1", leaf: node.level >= 3 },
                { value: "2", label: "2", leaf: node.level >= 3 }
              ]);
            }
            if (node.level == 2) {
              tempInfo.xq = node.value;
              let res = await axios.post(`teacherPageAPI/getClassList`, {
                xn: tempInfo.xn,
                xq: tempInfo.xq
              });

              const classList = res.data.map(value => ({
                value: value.class._id,
                label: value.class.name,
                leaf: node.level >= 3
              }));
              resolve(classList);
            }
            if (node.level == 3) {
              let res = await axios.post(
                `teacherPageAPI/classIdToGetSchedule`,
                {
                  xn: tempInfo.xn,
                  xq: tempInfo.xq,
                  class: node.value
                }
              );
              const scheduleList = res.data.map(value => ({
                value: value._id,
                label: value.coursename,
                leaf: node.level >= 3
              }));
              resolve(scheduleList);
            }
          }, 100);
        }
      },
      gradeZxf: 0,
      gradeZjd: 0,
      gradeList: [],
      submitFormList: [],
      searchParam: {
        classId: "",
        course: ""
      },
      isEditList: []
    };
  },
  methods: {
    search() {},
    async cascaderChange(e) {
      let year = e[0],
        xq = e[1];
      this.searchParam.classId = e[2];
      this.searchParam.course = e[3];
      this.getGradeList();
    },
    async getGradeList() {
      let res = await this.$http.get(
        `/teacherPageAPI/getGradeList/${this.searchParam.classId}/${this.searchParam.course}`
      );
      this.gradeZxf = res.data[0].course.zxf;
      this.gradeZjd = res.data[0].course.zjd;
      this.isEditList = res.data.filter(value => {
        return value.isEdit;
      });
      this.gradeList = res.data.map(value => ({
        _id: value._id,
        student: value.student,
        course: value.course,
        grade: value.grade,
        isEdit: value.isEdit
      }));
    },
    async submitChange() {
      this.submitFormList = this.gradeList.map(value => ({
        _id: value._id,
        grade: value.grade
      }));
      this.$confirm("是否确定提交学生成绩?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("teacherPageAPI/changeStudentGrade", {
              list: this.submitFormList,
              zxf: this.gradeZxf,
              zjd: this.gradeZjd
            })
            .then(res => {
              handleMessage(this, res.data);
              this.getGradeList();
            });
        })
        .catch(() => {});
    }
  },
  created() {}
};
</script>

<style scoped>
.cascader {
  width: 500px;
}
.search-Box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  /* margin-left: 100px; */
  justify-content: space-between;
}
.left-box {
  width: 50%;
}
.right-box {
  width: 50%;
}
.search-Box .item {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.search-Box .item:nth-child(1) {
  margin-top: 0;
}
.search-Box .in-item {
  display: flex;
  align-items: center;
}

.search-Box .in-item {
  margin-left: 50px;
}
.search-Box .in-item:nth-child(1) {
  margin: 0;
}
.in-item .label {
  width: 100px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}
.foot-box {
  display: flex;
  margin-top: 20px;
  align-items: flex-end;
  padding: 0 50px;
  padding-right: 80px;
  justify-content: space-between;
}
.button-div {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
</style>